<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "axios";

const route = useRoute()
const tableData = ref([])
console.log(route.query.id)

onMounted(() => {

  axios.get(`http://localhost:8000/app/shop/`)
      .then(res => {
        console.log(res.data)
        tableData.value = res.data.data
      })
})
const del_data=(info)=>{
  console.log(info)
}
</script>

<template>

  <div>
    <el-table :data="tableData" border style="width: 100%" >
      <el-table-column label="名称">
        <template #default="scope">
          <router-link :to="{ path: '/detail', query: { id: scope.row.id }}">{{ scope.row.name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="stock" label="数量"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="del_data(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<style scoped>

</style>